<template>
  <div class="register-bg">
    <div class="register-card">
      <div class="register-header">
        <div class="logo-circle">
          <svg class="logo-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h2 class="brand-title">数字心桥</h2>
      </div>
      <h3 class="register-title">注册新账号</h3>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">手机号</label>
          <input id="username" v-model="username" type="tel" required autocomplete="tel" />
          <span v-if="usernameError" class="field-error">{{ usernameError }}</span>
        </div>
        <div class="form-group">
          <label for="name">用户姓名</label>
          <input id="name" v-model="name" type="text" required autocomplete="name" />
          <span v-if="nameError" class="field-error">{{ nameError }}</span>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" type="password" v-model="password" required autocomplete="new-password" />
          <span v-if="passwordError" class="field-error">{{ passwordError }}</span>
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input id="confirmPassword" type="password" v-model="confirmPassword" required autocomplete="new-password" />
          <span v-if="confirmPasswordError" class="field-error">{{ confirmPasswordError }}</span>
        </div>
        <div class="form-group">
          <label for="role">用户类型</label>
          <select id="role" v-model="role" required>
            <option value="">请选择用户类型</option>
            <option value="therapist">康复师</option>
            <option value="parent">家长</option>
          </select>
          <span v-if="roleError" class="field-error">{{ roleError }}</span>
        </div>
        <p v-if="error" class="error-message">{{ error }}</p>
        <button 
          type="submit" 
          class="register-btn"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? '注册中...' : '注册' }}
        </button>
        <p class="to-login">已有账号？<router-link to="/login">去登录</router-link></p>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '../api/auth';

const username = ref('');
const name = ref('');
const password = ref('');
const confirmPassword = ref('');
const role = ref('');
const usernameError = ref('');
const nameError = ref('');
const passwordError = ref('');
const confirmPasswordError = ref('');
const roleError = ref('');
const error = ref('');
const isSubmitting = ref(false);
const router = useRouter();

// 手机号验证
const validateUsername = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!username.value) {
    usernameError.value = '请输入手机号';
    return false;
  } else if (!phoneRegex.test(username.value)) {
    usernameError.value = '请输入有效的手机号';
    return false;
  }
  usernameError.value = '';
  return true;
};

// 姓名验证
const validateName = () => {
  if (!name.value) {
    nameError.value = '请输入姓名';
    return false;
  } else if (name.value.length < 2 || name.value.length > 20) {
    nameError.value = '姓名长度应在2-20个字符之间';
    return false;
  }
  nameError.value = '';
  return true;
};

// 密码验证
const validatePassword = () => {
  if (!password.value) {
    passwordError.value = '请输入密码';
    return false;
  } else if (password.value.length < 6) {
    passwordError.value = '密码长度至少为6位';
    return false;
  }
  passwordError.value = '';
  return true;
};

// 确认密码验证
const validateConfirmPassword = () => {
  if (!confirmPassword.value) {
    confirmPasswordError.value = '请确认密码';
    return false;
  } else if (password.value !== confirmPassword.value) {
    confirmPasswordError.value = '两次输入的密码不一致';
    return false;
  }
  confirmPasswordError.value = '';
  return true;
};

// 用户类型验证
const validateRole = () => {
  if (!role.value) {
    roleError.value = '请选择用户类型';
    return false;
  }
  roleError.value = '';
  return true;
};

// 表单验证
const validateForm = () => {
  const usernameValid = validateUsername();
  const nameValid = validateName();
  const passwordValid = validatePassword();
  const confirmPasswordValid = validateConfirmPassword();
  const roleValid = validateRole();
  
  return usernameValid && nameValid && passwordValid && confirmPasswordValid && roleValid;
};

const handleRegister = async () => {
  error.value = '';
  
  // 验证表单
  if (!validateForm()) {
    return;
  }
  
  isSubmitting.value = true;
  
  try {
    // 根据API要求准备数据
    const userData = {
      username: username.value, // 手机号作为用户名
      name: name.value,
      password: password.value,
      userType: role.value // 用户类型
    };
    
    await register(userData);
    router.push('/login');
  } catch (err) {
    console.error('注册失败:', err);
    if (err.response?.status === 409) {
      error.value = '该手机号已被注册';
    } else if (err.response?.data?.message) {
      error.value = err.response.data.message;
    } else {
      error.value = '注册失败，请稍后重试';
    }
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style scoped>
.register-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.register-bg::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #a5b4fc55 60%, transparent 100%);
  border-radius: 50%;
  z-index: 1;
}
.register-bg::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #c4b5fd55 60%, transparent 100%);
  border-radius: 50%;
  z-index: 1;
}
.register-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(80, 80, 180, 0.10), 0 1.5px 6px 0 rgba(120, 80, 200, 0.08);
  padding: 2.5rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(2px);
}
.register-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2rem;
}
.logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px 0 #a5b4fc33;
}
.logo-svg {
  width: 32px;
  height: 32px;
  color: #fff;
}
.brand-title {
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 2px;
}
.register-title {
  font-size: 1.2rem;
  color: #6366f1;
  font-weight: 500;
  margin-bottom: 1.5rem;
  text-align: center;
}
.form-group {
  margin-bottom: 1.2rem;
  width: 100%;
}
label {
  display: block;
  margin-bottom: 0.4rem;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
}
input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid #c7d2fe;
  border-radius: 0.75rem;
  font-size: 1rem;
  outline: none;
  background: #f8fafc;
  transition: border 0.2s;
}
input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
  background: #fff;
}

select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: white;
}

select:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
  outline: none;
}

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}
.register-btn {
  width: 100%;
  padding: 0.9rem 0;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 #a5b4fc33;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.register-btn:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 4px 16px 0 #a5b4fc44;
  transform: translateY(-2px) scale(1.01);
}

.register-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.error-message {
  color: #ef4444;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
}

.field-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}
.to-login {
  margin-top: 1.2rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.98rem;
}
.to-login a {
  color: #6366f1;
  text-decoration: underline;
  margin-left: 0.2em;
}
</style>
